<template>
    <div id="app">
        <h1>根组件</h1>
        <h2>state - {{ title }}</h2>
        <h2>state - {{ count }}</h2>
        <input :value="count" type="text" @input="handleInput" />
        <Son1></Son1>
        <hr />
        <Son2></Son2>
    </div>
</template>

<script>
import Son1 from '@/components/Son1.vue'
import Son2 from '@/components/Son2.vue'
// 把store中的数据，映射到computed中
import { mapState } from 'vuex'

export default {
    name: 'app',
    data: function () {
        return {}
    },
    // computed: mapState(['count', 'title']),
    computed: {
        // count() {
        //     return this.$store.state.count
        // }
        // ...扩展运算符，展开对象
        ...mapState(['count', 'title'])
        // 还可以加一些自己的计算属性
    },
    methods: {
        handleInput(e) {
            // 修改这个count，只能提交mutation

            this.$store.commit('changeCount', +e.target.value)
        }
    },
    created() {
        // console.log(mapState(['count', 'title']))
        // console.log(this.$store.state.title)
    },
    components: {
        Son1,
        Son2
    }
}
</script>

<style>
#app {
    width: 600px;
    margin: 20px auto;
    border: 3px solid #ccc;
    border-radius: 3px;
    padding: 10px;
}
</style>
